<template>
	<!-- 封装的上传组件 -->
	<div class="fupload flexwarp">
		<!-- 上传按钮 -->
		<div v-if="datalist.length<count&&!disabled" @click="fupload" class="flexcent fuploadbtn">
			<!-- 图标 -->
			<span class="iconfont icon-xiangji" />
		</div>
		<!-- 后面的展示内容 -->
		<div class="fimgbox fuploadbtn" :class="{isactive:ispreview}" v-for="item,index in datalist" :key="index">
			<!-- 图片 -->
			<fimg class="images" :ispreview="false" @ispreview="preview(index)" :src="'id='+item" />
			<!-- 删除 -->
			<div v-if="iscutoff&&!disabled" @click.stop.prevent="cutoff(index)" class="flexcent iconfont icon-guanbi">
			</div>
		</div>
		<!-- tips -->
		<div class="uploadtips" v-if="fuploadtype === 'img'">单个文件不能超过10MB</div>
	</div>
</template>

<script>
	// 引入正则的js
	import * as base from '../../until/means/base.js'; //引入请求地址
	export default {
		name: 'fupload', //封装的上传组件
		props: {
			count: { // 最多可以选择的图片张数，默认1
				type: [Number],
				default: 1
			},
			sourceType: { // album 从相册选图，camera 使用相机默认二者都有
				type: [Array, String],
				default: () => {
					return ['album', 'camera']
				}
			},
			value: { //文件数据列表
				type: [String],
			},
			ispreview: { //是否显示预览功能，默认显示
				type: Boolean,
				default: true
			},
			iscutoff: { //是否显示删除功能，默认显示
				type: Boolean,
				default: true
			},
			isdownload: { //是否显示下功能，默认不显示
				type: Boolean,
				default: false
			},
			disabled: {
				default: false
			},
			// 上次文件类型，默认照片
			fuploadtype: {
				type: [String],
				default: "img"
			}
		},
		data() {
			return {
				datalist: [], //文件数据列表
			}
		},
		watch: {
			// 初始化同步数据 
			value: {
				handler(newName, oldName) {
					// 同步文件数据
					if (this.value) {
						this.datalist = this.value.split(",")
					} else {
						this.datalist = []
					}
				},
				immediate: true
			}
		},
		methods: {
			// 点击后上传图片
			fupload() {
				if (!this.disabled) {
					if (this.fuploadtype === 'img') {
						uni.chooseImage({
							count: this.count, //默认1
							sourceType: this.sourceType,
							success: (res) => {
								this.rest.tips("showload", '上传中') // 加载动画
								var msg = false
								res.tempFiles.forEach((item,index) => {
									if (item.size <= 10485760) {
										// 唤起上传接口
										uni.uploadFile({
											url: base.baseUrl +
												'/sys/common/upload', //仅为示例，非真实的接口地址
											filePath: item.path,
											name: 'file',
											success: (res) => {
												let result = JSON.parse(res.data).result
												this.datalist.push(result.id)
												this.$emit("update:value", this
													.datalist
													.join(","))
													
											},
											complete:()=>{
												if(index===(res.tempFiles.length-1)){
													// 隐藏当前加载动画
													this.rest.tips("hideload");
												}
											}
										})
									} else {
										if (!msg) {
											msg = true
											this.rest.tips("showtoast", "文件过大", '', 'error');
										}
									}
								})
								
							}
						});
					} else if (this.fuploadtype === 'video') {
						uni.chooseVideo({
							sourceType: this.sourceType,
							success: (res) => {
								this.datalist.push(...res.tempFilePaths)
								// 传出数据进行同步
								this.$emit("update:value", this.datalist.join(","))
							}
						});
					}
				}
			},
			// 预览图片功能
			preview(index) {
				if (this.ispreview) {
					var filelist = []
					this.datalist.forEach(item => {
						filelist.push(base.imageUrl + item)
					})
					// 预览图片
					uni.previewImage({
						urls: filelist,
						current: index,
						// loop: true, //可循环预览，app
					});
				}
			},
			// 删除图片功能
			cutoff(index) {
				// 从数组中删除
				this.datalist.splice(index, 1);
				// 传出数据进行同步
				this.$emit("update:value", this.datalist.join(","))
			},
			// 下载图片功能
			download(index) {
				uni.saveImageToPhotosAlbum({
					filePath: this.datalist[index],
					success: () => {
						this.rest.tips('showtoast', '保存成功', '', 'success')
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	// 封装的上传组件
	.fupload {
		width: 100%;
		height: 100%;
		position: relative;
		padding-bottom: 45rpx;

		// 提醒文字
		.uploadtips {
			position: absolute;
			left: 0;
			bottom: 0;
			font-size: 22rpx;
			color: #FF4F4F;
		}

		// 上传按钮
		.fuploadbtn {
			width: 150rpx;
			height: 150rpx;
			background: #FAFAFA;
			border-radius: 4rpx;
			border: 1rpx dashed #CECECE;
			margin: 10rpx;

			.icon-xiangji {
				font-size: 40rpx;
				color: #CECECE;
			}
		}

		// 上传内容盒子
		.fimgbox {
			position: relative;
			border: 0;

			// 删除图标
			.icon-guanbi {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: -20rpx;
				top: -20rpx;
				border-radius: 50%;
				font-size: 30rpx;
				z-index: 20;
				background-color: #757575;
				color: #ffffff;
			}
		}

		// 是否开启点击样式
		.isactive:active {
			opacity: .7;
		}
	}
</style>